<template>
  <view class="container" :class="isDopdown ? 'showDrodwon' : ''">
    <view class="search-wall_H" :style="{ paddingTop: safeArea.top + 'px' }"></view>

    <view class="search-wall">
      <mineNavbar :styleData="styleData"> </mineNavbar>
      <!-- <view class="c_search">
        <picker
          :value="searchType"
          mode="region"
          @change="handleSelect"
          class="c_picker">
          <view class="left">
            <text>{{ searchType }}</text>
            <view class="iconfont icon-jiantou1"></view>
          </view>
        </picker>
        <view class="middle">
          <input type="text" placeholder="搜索职位/公司名称" />
        </view>
        <view class="right">
          <image src="@/static/images/recruit/search.png" />
        </view>
      </view> -->
      <view class="c_select">
        <view class="left">
          <view v-for="(item, index) in selectArr" :key="index" @click="changeSelectWork(item)">
            <text>{{ item }}</text>
            <image src="@/static/images/recruit/up1.png" v-if="isshowUp === item" />
            <image src="@/static/images/recruit/up.png" v-else />
          </view>
        </view>
        <!-- <view class="right" @click="changleWorkType">
          <image src="@/static/images/recruit/fenlei.png" v-if="isShowIcon" />
          <image src="@/static/images/recruit/fenlei1.png" v-else />
        </view> -->
      </view>
      <dropDown v-show="isDopdown" :isshowUp="isshowUp" @handleCancel="handleCancel" @handleConfirm="handleConfirm">
      </dropDown>
      <!-- 分类部分 -->
    </view>

    <scroll-view scroll-y class="scroll-main" @scrolltolower="scrollBottomFn">
      <!-- 列表 -->
      <talentsList :list="list"></talentsList>
      <uni-load-more :status="loading" />
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import dropDown from "./dropDown/index.vue";
import talentsList from "@/components/talentsList/talentsList.vue";
import { getTalentsList } from "@/api/subPage/talents.js";
export default {
  components: { talentsList, dropDown },
  data() {
    return {
      styleData: {
        tabbarText: "人才",
        show: true,
      },
      list: [],
      pages: 1, //当前分页总页数
      loading: "more", //加载状态
      form: {
        pageSize: 10, //pageSize 每页大小
        pageNum: 1, // pageNum 页数
        city: "", //城市
        educationTypes: [], // 学历类型 使用数据字典（wxb_education_type）
        startSalary: "", // 薪资范围-起始薪资
        endSalary: "", // 薪资范围-结束薪资
        industryId: [], // 岗位分类
        // arrivalTimes: '', // 到岗时间 使用数据字典（wxb_arrival_time_type）
        // //年龄
        // age: {
        // 	startAge: '', //起始
        // 	endAge: '', // 结束
        // },
        // //工作经验
        // workExperiences: {
        // 	startWorkExperience: '', //起始
        // 	endWorkExperience: '', // 结束
        // },
      },
      workTypeArr: ["零工兼职", "小时工兼职", "全职岗位"],
      workTypeValue: "零工兼职",
      searchType: "岗位意向",
      // selectArr: ["分类", "排序", "筛选"],
      selectArr: ["位置", "行业", "类型", "筛选"],
      isshowUp: "", //选中的字段
      // isShowIcon: true,
      isDopdown: false,
    };
  },
  computed: {
    ...mapState(["safeArea"]),
  },
  created() {
    this.getListFn();
  },
  mounted() { },
  methods: {
    getListFn(current) {
      let pages = this.pages;
      if (current && current > pages) {
        return true;
      }
      let pageNum = current ? current : 1;

      this.loading = pageNum <= pages ? "loading" : "noMore";
      console.log(this.form, 222);
      if (uni.getStorageSync('talantIndustryId')) {
        this.form.industryId = [uni.getStorageSync('talantIndustryId')]
      }
      this.form.pageNum = pageNum;
      getTalentsList(this.form)
        .then((res) => {
          let records = res.rows ? res.rows : [];
          let newList = pageNum === 1 ? records : [...this.list, ...records];
          let newPages = Math.ceil(res.total / this.form.pageSize);
          this.pages = newPages;
          this.loading = pageNum < newPages ? "more" : "noMore";

          this.list = newList;
        })
        .catch((e) => {
          this.loading = "noMore";
        });
    },
    // 监听滑动到底部
    scrollBottomFn() {
      let pageNum = this.form.pageNum;
      if (pageNum < this.pages) {
        this.getListFn(pageNum + 1);
      }
    },
    // 选择城市
    handleSelect(e) {
      console.log(e);
      this.searchType = e.detail.value[2];
    },
    // 筛选
    changeSelectWork(e) {
      console.log(e);
      if (this.isshowUp === e) {
        this.isDopdown = !this.isDopdown;
      } else {
        this.isDopdown = true;
        this.isshowUp = e;
      }
    },

    // 切换岗位的显示方式
    // changleWorkType() {
    //   this.isShowIcon = !this.isShowIcon;
    // },
    // 取消
    handleCancel(e) {
      this.isDopdown = e;
    },
    // 确认
    handleConfirm(e) {
      console.log(e, "---------------抛出来的数据");

      let selectData = {
        city: e.city, //城市
        industryId: e.industryId || [], // 岗位分类
        jobType: e.sortType ? [e.sortType] : [], // 求职类型 （1=零工、2=兼职，3=全职）
        startSalary: e.startSalary, // 薪资范围-起始
        endSalary: e.endSalary, // 薪资范围-结束
        educationTypes: e.educationTypes, // 学历
        enterpriseScales: e.enterpriseScales, // 企业规模
        // 工作经验
        workExperiences: e.workExperiences,
      };
      this.form = Object.assign(this.form, selectData);
      this.pages = 1;
      this.getListFn(1);
      this.isDopdown = false;
      // this.isDopdown = e;
    },
  },
  onHide () {
    console.log(111);
    uni.removeStorageSync("talantIndustryId")
  }
};
</script>

<style lang="scss">
.search-wall {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 10;
}

.search-wall_H {
  height: 182rpx; // 80+88+94 = 262
  box-sizing: content-box;
}

.scroll-main {
  // height: calc(100vh - 280rpx);
  height: calc(100vh - 182rpx);
  box-sizing: border-box;
  padding: 0 0 30rpx;
}

.c_search {
  // width: 700rpx;
  height: 72rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  margin: 22rpx 24rpx 0;
  position: relative;

  .c_picker {
    width: 20%;
  }

  .left {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-left: 10px;

    >text {
      margin-right: 5px;
    }
  }

  .left::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    width: 1px;
    background-color: #00000033;
    height: 10px;
  }

  .middle {
    width: 69%;
    margin-left: 20px;
  }

  .right {
    width: 10%;

    image {
      width: 14px;
      height: 14px;
    }
  }

  .iconfont {
    transform: rotate(-90deg);
    font-size: 10px;
    color: #ccc;
  }
}

.c_select {
  width: 100%;
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  // margin-bottom: 10rpx;
  // border-bottom: 20rpx solid #F9F9F9;

  .dropDown {
    position: absolute;
    top: 90rpx;
    left: 0;
    z-index: 99;
    height: 100vh;
  }

  >view {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .left {
    width: 100%;

    >view {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      >text {
        margin-right: 5px;
      }

      image {
        width: 14rpx;
        height: 8px;
      }
    }
  }

  .right {
    width: 10%;
    justify-content: center;
  }

  image {
    width: 48rpx;
    height: 48rpx;
  }

  .classify {
    position: absolute;
    top: 88rpx;
    left: 0;
    width: 100%;
    background: #fff;

    >view {
      display: flex;
    }

    .left {
      width: 200rpx;
      background: #d8d8d85c;
      color: #00000073;

      >view {
        width: 100%;
        height: 120rpx;
      }

      .active {
        background-color: #fff;
        color: #000;
      }
    }

    .right {
      width: calc(100% - 200rpx);
      display: flex;
      flex-wrap: wrap;

      >view {
        width: 162rpx;
        height: 65rpx;
        border-radius: 32rpx;
        background-color: #ff9e24;
        color: #fff;
        text-align: center;
        line-height: 65rpx;
        margin-left: 14rpx;
      }
    }
  }
}
</style>
